<template>
     <div class="box">
        <div class="title">
            <div class="img">
                <img class="image1" src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fsafe-img.xhscdn.com%2Fbw1%2F02c3bd99-9dfb-4ac1-882b-7947f2c5de00%3FimageView2%2F2%2Fw%2F1080%2Fformat%2Fjpg&refer=http%3A%2F%2Fsafe-img.xhscdn.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1690938775&t=a2443272aee74961b0cd4b60b8ccac8f">
            </div>
            <div class="merchatName">
                <span class="name">{{ dishList[0].merName }}</span>
            </div>
        </div>
        <!-- 菜品遍历 -->
        <div class="dish" >
            <div class="dish1" v-for="(d,index) in dishList" :key="d.dishId">
              1123
                <div class="img">
                    <img class="image" :src="d.dishImg">
                </div>
                <div class="dishName">
                    <span class="name1">{{ d.dishName }}</span>
                </div>
                <div class="dishPrice">
                  <span class="price">售价 {{ d.dishPrice }} 元</span>
                </div>
                <!-- 选择菜品数目,在这个选择的菜品会加入一个-->
                <!-- <div class="count">
                    <div class="add">
                        <button	
                        @click="updateNumber({ shoppingcarId: d.dishiId , num: quantity - 1 })" 
                        style="height: 20px;width: 20px;">+</button>
                    </div>
                    <div class="num">
                        <span class="name1">{{ quantity }}</span>
                    </div>
                    <div class="minus">
                        <button @click="updateNumber({ shoppingcarId: d.dishId, num: quantity + 1 })" style="height: 20px;width: 20px;">-</button>
                    </div>
                </div> -->
                <div class="count">
                    <div class="minus">
                        <button @click="downs(index)" style="height: 20px;width: 20px;">-</button>
                    </div>
                    <div class="num">
                        <span class="name1">{{ quantity[index] }}</span>
                    </div>
                    <div class="add">
                        <button	
                        @click="ups(index,d.quantityLeft)" 
                        style="height: 20px;width: 20px;">+</button>
                    </div>
                    <div>
                      <button style="height: 20px;width: 20px;" @click="subaDish(d.dishId,quantity[index],index)">添加到订单</button>
                    </div>
                </div>
                <!-- 菜品剩余数量，在提交订单之后更新 -->
                <div class="qLeft">
                  <span class="qleft">剩余 {{ d.quantityLeft }} 件</span>
                </div>
            </div>
        </div>
        <div class="button1">
            <button @click="drawer = true" type="primary" class="order">查看订单</button>
        </div>
        <!-- 下单界面--抽屉组件，循环展示userOrders数组 -->
        <div>
            <el-drawer style="overflow: hidden;"
            title="我的订单"
            :visible.sync="drawer"
            :size="size"
            :direction="direction"
            :before-close="handleClose" class="drawer">
            <el-table :data="Array.from(preOrders)">
              <el-table-column property="dishName" label="菜品名" width="150"></el-table-column>
              <el-table-column label="菜品图片" width="200">
                <template slot-scope="scope">
                  <img :src="scope.row.dishImg" alt="菜品图片" style="width: 100px; height: 100px;">
                </template>
              </el-table-column>
              <el-table-column property="dishPrice" label="单价" width="200"></el-table-column>
              <el-table-column property="quantityOrdered" label="下单数"></el-table-column>
            </el-table>
        <div class="button1">
            <button class="order" @click="subOrders">提交订单</button>
        </div>
            </el-drawer>
        </div>
     </div> 
</template>
  
  <script>
  import merApi from "@/api/apiPb/User_order";

  export default {
    data() {
      return {
        merId:0, //接收来自MainPage的参数，根据merId渲染页面
        userId:0,
        dishList:[],//菜品列表--展示用
        userInfo:{},//用户信息--下单用
        drawer: false,
        size:'70%',
        direction: 'btt',
        quantity:[], //单菜品下单数目数组
        UserOrderDatas:{}, //下单信息，要传递给后端的参数
        userOrders:[],
        //单个菜品
        userOrder:{
          address:{
            region:"",
            street:"",
            detailAddress:""
          },
          orderDish:{dishID:0,quantityOrdered:0},
          userId:0,
          merId:0
        }, //存储的对象格式,0是各个菜品要添加的数据,其他数据一个用户是统一的
        //订单展示页
        // preOrders:new Map(),
        preOrders:[]

      }
    },
    methods: {
      //菜品列表数目加减逻辑
      // updateNumber({ shoppingcarId, num }) {
			// this.$store.dispatch('buycart/updateBuycartNumber', { shoppingcarId, num })
      // },

      //单个菜品添加到订单页
      subaDish(dishID,quantities,index){
        //后台交互
        this.userOrder.address.region=this.userInfo.address.region;
        this.userOrder.address.street=this.userInfo.address.street;
        this.userOrder.address.detailAddress=this.userInfo.address.detailAddress;
        this.userOrder.orderDish.dishID=dishID;
        this.userOrder.orderDish.quantityOrdered=quantities;
        this.userOrder.userId=this.userId;
        this.userOrder.merId=this.merId;
        //排重
        // const existData = this.UserOrderDatas.find(obj=>obj.OrderDish.dishID===this.userOrder.orderDish.dishID);
        // if(existData){//如果存在相同的，则覆盖
        //   const indexes = this.UserOrderDatas.indexOf(existData);
        //   this.UserOrderDatas.splice(indexes, 1, this.userOrder);
        // }else{
        //   this.UserOrderDatas.push(this.userOrder);
        // }
        // const existIndex = this.UserOrderDatas.findIndex(obj => obj.orderDish.dishID === this.userOrder.orderDish.dishID);
        // if (existIndex > -1) {
        //   this.UserOrderDatas[existIndex] = this.userOrder;
        // } else {
        //   this.UserOrderDatas.push(this.userOrder);
        // }
        // const existData = this.UserOrderDatas.filter(obj => obj.orderDish.dishID === this.userOrder.orderDish.dishID);
        // if (existData.length > 0) {
        //   // 如果存在相同的，则过滤掉已存在的数据
        //   this.UserOrderDatas = this.UserOrderDatas.filter(obj => obj.orderDish.dishID !== this.userOrder.orderDish.dishID);
        // }
        this.userOrders.push(this.userOrder);

        //前台展示
        const preOrder = {
          dishName: this.dishList[index].dishName,
          dishImg: this.dishList[index].dishImg,
          dishPrice: this.dishList[index].dishPrice,
          quantityOrdered: quantities
        };
        if(quantities!=0){this.preOrders.push(preOrder);}
        // if(preOrder.quantityOrdered==0){//不点，则从图中删除该数据
        //   this.preOrders.delete(dishID);
        // }
      },

      // 菜品加逻辑
      ups(index,nums){//nums:传递的商品剩余数
        // console.log(index,nums);
        if(this.quantity[index]+1<=nums){this.quantity[index]++}//下单数+1
        else alert("商品不足！")
      },
      //商品减逻辑
      downs(index){
        if(this.quantity[index]-1>=0){this.quantity[index]--}
        else alert("不能再减啦！")
      },
      //提交订单
      subOrders(){
        this.UserOrderDatas.userOrders=this.userOrders;
        // console.log(this.UserOrderDatas);
        merApi.insertOrders(this.UserOrderDatas).then(response=>{
          alert(response.data.msg);
        })
      },

      //关闭订单界面逻辑
      handleClose(done) {
        this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {});
        },
      //获取菜品信息
      getDishes(){
        merApi.getDishList(this.merId).then(response =>{
          this.dishList = response.data.data;
          this.quantity = new Array(this.dishList.length).fill(0);//初始化数组长度
        })
      },
      //获取用户信息
      getUser(){
        merApi.getUserInfo(this.userId).then(response =>{
          this.userInfo = response.data.data;
        })
      }
    },
    mounted() {
      //接收参数
      this.merId=this.$route.query.merId;
      this.userId=this.$route.query.userId;
      //渲染商家菜品列表
      this.getDishes();
      //获取用户数据
      this.getUser();
    },
  };
  </script>
  <style scoped>
  * {
    /* 初始化 取消内外边距 */
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
  }
  body{
    /* 溢出隐藏 */
    margin: 0;
    padding: 0;
    overflow: hidden;
    width: 100%;
    height: 100%;
    
  }
  .box{
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    
  }
  .title{
    position: relative;
    background: black;
    width: 100%;
    height: 10%;
    display: flex;
    justify-content: space-around;
    border-bottom: 2px solid yellowgreen;
  }
  .image1{
    position: relative;
    width: 40px;
    height: 40px;
  }
  .image{
    position: relative;
    width: 100px;
    height: 100px;
  }
  .img{
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
  }
  .merchatName{
    position: relative;
    color: white;
    display:flex;
    justify-content: left;
    text-align: center;
    align-items: center;
  }
  .name{
    display:flex;
    justify-content: left;
    text-align: center;
    align-items: center;
  }
  .name1{
    position: relative;
    display:flex;
    justify-content: center;
    text-align: center;
    align-items: center;
  }
  .dish{
    position: relative;
    width: 100%;
    height: 80%;
    display: flex;
    flex-direction: column;
    
  }
  .dish1{
    position: relative;
    width: 100%;
    height: 100px;
    display: flex;
    justify-content: space-around;
    border:1px solid orange;
    background: rgb(156, 243, 243);
  }
  .dishName{
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    border-left:1px solid orange;
  }
  .count{
    width: 100%;
    height: 100%;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    border-left:1px solid orange;
  }
  .add{
    position: relative;
    height: 30px;
    width: 30px;
    display: flex;
    justify-content: center;
    align-items: center;
    border: 1px solid black;
  }
  .num{
    position: relative;
    display: flex;
    height: 30px;
    width: 30px;
    justify-content: center;
    align-items: center;
    border: 1px solid black;
  }
  .minus{
    position: relative;
    display: flex;
    height: 30px;
    width: 30px;
    justify-content: center;
    align-items: center;
    border: 1px solid black;
  }
  .button1{
    position: absolute;
    right:0;
    bottom:0;
    width: 100%;
    height: 10%;
    display:flex;
    justify-content: right;
    align-items: center;
  }
  .order{
    position: relative;
    width: 100px;
    width: 100px;
  }
  
  </style>